<template>
	<u-swiper
		:list="list"
		indicator
		previousMargin="30"
		nextMargin="30"
		circular
		:autoplay="true"
		radius="5"
		:height="option.height"
		bgColor="#ffffff"
		@click="click"
	></u-swiper>
</template>

<script>
	export default {
		name: 'shop-slide',
		props: {
			option: {}
		},	
		data() {
			return {
				swiperCurrent: 0
			}
		},
		computed: {
			list() {
				let list = [];
				this.option.list.forEach(item => {
					list.push(this.$tools.fixurl(item.url))
				})
				return list;
			}
		},
		methods: {
			click(index) {
				this.$jump(this.option.list[index].nav);
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.option.list[index] ? (this.option.list[index].background || '') : ''
			},
			navToLink(item) {
				this.$jump(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.carousel-section {
		padding: 0;
	
		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}
	
		.carousel {
			.carousel-item {
				padding: 0;
			}
		}
	
		.swiper-dots {
			left: 45upx;
			bottom: 40upx;
		}
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;
	
		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}
	
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			transition: .4s;
		}
	}
	
	.carousel {
		width: 100%;
		height: 350upx;
	
		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}
	
		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;
	
		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}
	
		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
</style>
